<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="https://weui.shanliwawa.top/css/weui.css"/>
    <link rel="stylesheet" href="https://weui.shanliwawa.top/css/weuix.css"/>
    <title>B-IM</title>
    <style>
        .weui-search-bar:before {
            border-top: none;
        }
        #msg-input {
            height: 41px;
            padding-bottom: 5px;
        }
        #msg-input input {
            height: 15px;
            width:-webkit-calc(100% - 100px);
            width:-moz-calc(100% - 100px);
            width:calc(100% - 100px);
            background: #fff;
            border: solid 1px #ddd !important;
            border-radius: 5px;
            padding: 10px !important;
            margin: 5px 5px 0 10px;
        }
        #msg-input button {
            margin: 5px 0;
            height: 37px;
            width: 56px;
            background: #fff;
            border: solid 1px #ddd !important;
            border-radius: 5px;
        }
        #msg {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        #msg .friend_name {
            margin-bottom: -2px;
            text-align: left;
            padding: 0 10px;
        }
        #msg .me_name {
            margin-bottom: -2px;
            text-align: right;
            padding: 0 10px;
        }
        /*图片气泡*/
        .friend_lists {
            margin: 0 50px 0px 10px;
            position: relative;
        }
        .friend_lists .header_img {
            position: absolute;
            top: 5px;
        }
        .me_lists {
            position: relative;
            margin: 0 10px 0px 50px;
        }
        .me_lists .msg {
            float: right;
            margin-right: 73px;
        }
        .me_lists .header_img {
            position: absolute;
            top: 5px;
            right: 0px;
        }
        /*背景气泡*/
        .msg-left-white {
            background-color: #eaeaea;
            font-size: 16px;
        }
        .msg-right-green {
            background-color: #a0e759;
            font-size: 16px;
        }
        .msg-wrapper p {
            color: black;
            display: inline-block;
            padding: 12px;
            margin: 10px;
            position: relative;
            border-radius: 5px;
        }
        .msg-wrapper.right,
        .msg-wrapper.left {
            float: none !important;
        }
        .msg-wrapper.right p {
            margin-left: 60px;
        }
        .msg-wrapper.right p:before {
            width: 0;
            position: absolute;
            top: 15px;
            border-style: solid;
            content: "";
        }
        .msg-wrapper.right p:before {
            left: -12px;
            border-color: transparent #eaeaea;
            border-width: 0 12px 12px 0;
        }
        .msg-wrapper.left p:before {
            width: 0;
            position: absolute;
            top: 15px;
            border-style: solid;
            content: "";
        }
        .msg-wrapper.left p {
            margin-right: 60px;
        }
        .msg-wrapper.left {
            text-align: right;
        }
        .text-left {
            text-align: left;
        }
        .msg-wrapper.left p:before {
            right: -12px;
            border-color: transparent #a0e759;
            border-width: 0 0 12px 12px;
        }
        .cur_time {
            text-align: center;
            width: 100%;
            margin-top: 10px;
        }
        .cur_time span {
            width: auto;
            display: inline-block;
            padding: 2px 10px;
            font-size: 14px;
            border-radius: 3px;
            background: #CECECE;
            color: white;
        }
    </style>
</head>
<body>
<div id="app" class="weui-tab">
    <div class="login-page" v-if="!isLogin">
        <div class="page-hd"></div>
        <div class="page-hd"></div>
        <div class="page-hd"></div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">Token</label>
                </div>
                <div class="weui-cell__bd weui-cell_primary">
                    <input type="text" class="weui-input" placeholder="Token" v-model="token"/>
                </div>
            </div>
        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" @click="login">登录</a>
        </div>
    </div>
    <div class="main-page" v-show="isLogin">
        <div v-show="!isChat">
            <div class="weui-tab__panel">
                <div class="weui-tab__content">
                    <div class="weui-btn_default weui-header" style="background-color: #EFEFF4;">
                        <h1 class="weui-header-title f-black">B-IM</h1>
                        <div class="weui-header-right"><a class="icon icon-36 f-black"></a></div>
                    </div>
                    <div class="weui-search-bar">
                        <form class="weui-search-bar__form">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input class="weui-search-bar__input" placeholder="搜索" type="search">
                                <a href="javascript:" class="weui-icon-clear"></a>
                            </div>
                            <label class="weui-search-bar__label">
                                <i class="weui-icon-search"></i>
                                <span>搜索</span>
                            </label>
                        </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>
                    </div>
                    <div class="weui-cells" style="margin-top: 0;">
                        <div class="weui-cell"  @click="chatClick(1, '地球村(群)', 2)">
                            <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                                <img src="https://weui.shanliwawa.top/images/pic_160.png"
                                     style="width: 50px;display: block">
                                <!--<span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>-->
                            </div>
                            <div class="weui-cell__bd">
                                <p>地球村(群)</p>
                                <p style="font-size: 13px;color: #888888;">.............................</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-tab__content">
                    <div class="weui-btn_default weui-header" style="background-color: #EFEFF4;">
                        <h1 class="weui-header-title f-black">通讯录</h1>
                        <div class="weui-header-right"><a class="icon icon-83 f-black"></a></div>
                    </div>
                    <div class="weui-search-bar" id="searchBar">
                        <form class="weui-search-bar__form" action="#">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required=""
                                       type="search">
                                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label class="weui-search-bar__label" id="searchText"
                                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                                <i class="weui-icon-search"></i>
                                <span>搜索</span>
                            </label>
                        </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>
                    <div class="weui-cells" style="margin-top: 0;">
                        <div class="weui-cell" v-for="user in users" @click="chatClick(user.id,user.nickname,1)">
                            <div class="weui-cell__hd">
                                <img src=""
                                     style="width:20px;margin-right:5px;display:block">
                            </div>
                            <div class="weui-cell__bd">
                                <p>{{user.nickname}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-tab__content">个人信息</div>
            </div>
            <div class="weui-tabbar tab-bottom">
                <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <i class="icon icon-80 f27 weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                </span>
                    <p class="weui-tabbar__label">信息</p>
                </a>
                <a href="javascript:;" class="weui-tabbar__item">
                    <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                    <p class="weui-tabbar__label">在线用户</p>
                </a>
                <a href="javascript:;" class="weui-tabbar__item ">
                    <i class="icon icon-85 f27 weui-tabbar__icon"></i>
                    <p class="weui-tabbar__label">我</p>
                </a>
            </div>
        </div>
        <div v-show="isChat">
            <div class="weui-btn_default weui-header" style="background-color: #EFEFF4;">
                <div class="weui-header-left" @click="isChat = false"><a class="icon icon-109 f-black"></a></div>
                <h1 class="weui-header-title f-black">{{chatInfo.name}}</h1>
                <div class="weui-header-right"><a class="icon icon-22 f-black"></a></div>
            </div>
            <div id="msg">
                <div v-for="item in chatInfo.msg">
                    <template v-if="item.from != null">
                        <div class="friend_name" v-if="chatInfo.type == 2">{{ getUserName(item.from) }}</div>
                        <div class="friend_lists">
                            <div class="header_img">
                                <img src="" width="40px" height="40px">
                            </div>
                            <div class="msg-wrapper right">
                                <p class="msg-left-white">{{ item.content }}</p>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.from == null">
                        <!--<div class="me_name">{{ getUserName(item.from) }}</div>-->
                        <div class="me_lists">
                            <div class="header_img">
                                <img src="" width="40px" height="40px">
                            </div>
                            <div class="msg-wrapper left">
                                <p class="msg-right-green">{{ item.content }}</p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div id="msg-input" class="weui-tabbar tab-bottom">
                <input class="weui-input" type="text" style="border: 1px;" v-model="content">
                <button type="button" class="mui-btn mui-btn-gray" id="send" @click="sendChat(chatInfo.id, chatInfo.type)">发送</button>
            </div>
        </div>
    </div>
</div>
<script src="https://weui.shanliwawa.top/js/zepto.min.js"></script>
<script src="https://weui.shanliwawa.top/js/zepto.weui.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            token: new Date().getTime(),
            isLogin: false,
            isChat: false,
            chatInfo: {
                id: null,
                name: null,
                type: null, // 1:私聊;2:群聊
                msg: []
            },
            content: "",
            chatData: {},
            ws: null,
            users: [],
            seq: 1
        },
        methods: {
            getSeq: function () {
                return this.seq++;
            },
            initWs: function () {
                var self = this;
                self.ws = new WebSocket("ws://localhost:9011/ws");
                self.ws.onopen = function (evt) {
                    console.log("Connection open");
                    self.heatbeat();
                };
                self.ws.onclose = function (evt) {
                    console.log("Connection closed.");
                };
                self.ws.onmessage = function (event) {
                    self.commandHandler(JSON.parse(event.data));
                };
            },
            sendMsg: function (msg) {
                this.ws.send(JSON.stringify(msg));
            },
            commandHandler: function (json) {
                switch (json.command) {
                    case 2:
                        if (this.isOk(json)) {
                            this.isLogin = true;
                            $.toptip('登录成功', 'success');
                        }
                        break;
                    case 4:
                        if (this.isOk(json)) {
                            this.users = json.users;
                        }
                        break;
                    case 7:
                        if (json.chatType === 2) {
                            this.saveChatData(json.to, json);
                        } else {
                            this.saveChatData(json.from, json);
                        }
                        break;
                }
            },
            isOk: function (json) {
                if (json.status !== 0) {
                    $.toptip(json.msg, 'error');
                    return false;
                }
                return true;
            },
            chatClick: function (userId, name, type) {
                this.isChat = true;
                this.chatInfo = {
                    id: userId,
                    name: name,
                    type: type,
                    msg: this.chatData[type] != null ? this.chatData[type][userId] : []
                };
                console.log("chat:" + userId)
            },
            sendChat: function(to, chatType) {
                if (this.content != '') {
                    var json = {
                        command: 5,
                        req: this.getSeq(),
                        to: to,
                        content: this.content,
                        msgType: 1,
                        chatType: chatType
                    };
                    this.sendMsg(json);
                    this.content = '';
                    this.saveChatData(to, json);
                }
            },
            login: function () {
                this.sendMsg({"command": 1, "seq": this.getSeq(), "token": this.token});
            },
            loadUsers: function () {
                this.sendMsg({"command": 3, "seq": this.getSeq()});
            },
            heatbeat: function () {
                var self = this;
                setInterval(function () {
                    self.sendMsg({"command": 8, "seq": self.getSeq()})
                }, 49_000);
            },
            saveChatData: function (userId, obj) {
                if (this.chatData[obj.chatType] == null) {
                    this.chatData[obj.chatType] = {};
                }
                if (this.chatData[obj.chatType][userId] == null) {
                    this.chatData[obj.chatType][userId] = [];
                }
                this.chatData[obj.chatType][userId].push({
                    from: obj.from,
                    content: obj.content
                });
                if (userId == this.chatInfo.id) {
                    this.chatInfo.msg = this.chatData[obj.chatType][userId];
                }
            },
            getUserName: function (userId) {
                for (var i = 0; i < this.users.length; i++) {
                    var item = this.users[i];
                    if (item.id == userId) {
                        return item.nickname;
                    }
                }
                return 'null';
            }
        },
        mounted: function () {
            var self = this;
            self.initWs();
            $('.weui-tab').tab({
                defaultIndex: 0,
                activeClass: 'weui-bar__item_on',
                onToggle: function (index) {
                    if (index === 1) {
                        self.loadUsers();
                    }
                }
            });
        }
    });
</script>
</body>
</html>